<template>
  <div class="app-container">
    <el-form :inline="true" class="demo-form-inline">
      <el-form-item>
        <el-select
          v-model="searchObj.provinceCode"
          placeholder="请选择省"
            @change="provinceChanged">
          <el-option
            v-for="item in provinceList"
              :key="item.id"
              :label="item.name"
              :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
        v-model="searchObj.cityCode"
        placeholder="请选择市"
        @change="cityChanged">
          <el-option
          v-for="item in cityList"
          :key="item.id"
          :label="item.name"
          :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-select
        v-model="searchObj.districtCode"
        placeholder="请选择区"
        @change="districtChanged">
          <el-option
          v-for="item in districtList"
          :key="item.id"
          :label="item.name"
          :value="item.id"/>
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-input v-model="searchObj.hosname" placeholder="医院名称"/>
      </el-form-item>
      <div class="searchBar">
        <el-button type="primary" icon="el-icon-search" @click="fetchData()">查询</el-button>
        <el-button type="default" @click="resetData()">清空</el-button>
      </div>
    </el-form>

    <el-table v-loading="listLoading" :data="list"
      style="width: 100%;margin-left: 8px;"
      stripe
      border
      fit
      highlight-current-row>

      <!-- 标号字段 -->
			<el-table-column label="标号" type="index" width="50" align="center"/>

      <el-table-column label="医院logo" align="center">
          <template slot-scope="scope">
          <img :src="'data:image/jpeg;base64,'+scope.row.logoData" width="80" align="center">
          </template>
      </el-table-column>

      <el-table-column prop="hosname" label="医院名称" align="center"/>
      <el-table-column prop="param.hosTypeName" label="等级" width="90" align="center"/>
      <el-table-column prop="param.addressName" label="详情地址" align="center"/>
      <el-table-column label="状态" width="80" align="center">
        <template slot-scope="scope">
            <!-- {{ scope.row.status ===1 ? "可用" : "不可用"}} -->
            <p style="color: #67c23a;font-weight: bolder;" v-if="scope.row.status ===1">已上线</p>
            <p style="color: #ebb563;font-weight: bolder;" v-if="scope.row.status ===0">已下线</p>
        </template>
      </el-table-column>

      <el-table-column prop="createTime" label="创建时间" align="center"/>

      <el-table-column label="操作" width="290" align="center">
          <template slot-scope="scope">
            <!-- 上线按钮 -->
            <el-button type="warning" size="mini" v-if="scope.row.status === 1"
                icon="el-icon-lock" @click="updateStatus(scope.row)">
                        下线 
            </el-button>

            <!-- 下线按钮 -->
            <el-button type="success" size="mini" v-if="scope.row.status === 0"
                icon="el-icon-unlock" @click="updateStatus(scope.row)">
                        上线
            </el-button>

            <!-- 详情按钮 -->
            <el-button type="primary" size="mini" icon="el-icon-info" @click="jumpShow(scope.row.id)">
                  详情
            </el-button>

            <!-- 排班按钮 -->
            <el-button type="info" size="mini" icon="el-icon-user-solid" @click="jumpSchedule(scope.row.hoscode)">
                  排班
            </el-button>
           

          </template>
      </el-table-column>
    
</el-table>

    <!-- 分页组件 -->
    <el-pagination
        :current-page="page"
        :total="total"
        :page-size="limit"
        :page-sizes="[3, 6, 9, 12]"
        style="padding: 30px 0; text-align: center;"
        layout="sizes, prev, pager, next, jumper, ->, total, slot"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
    />
  </div>
</template>

<script>
import hosp_api from '@/api/hosp/hosp'
export default {
data(){
  return {
    searchObj:{},//搜索框数据模型
    provinceList:[],//省
    cityList:[],//市
    districtList:[],//区
    listLoading:true,//列表数据加载状态
    list:[],//列表数据
    page:1,//当前页
    limit:6,//每页记录数
    total:0//总记录数
  }
},

created(){
//分页查询方法
this.fetchData()
//查询所有省方法
this.findAllProvince()
},

methods:{
  //搜索表单查询方法
  fetchData(){
    hosp_api.selectByPageAndCondition(this.page,this.limit,this.searchObj).then(res => {
      this.total = res.data.totalElements
      this.list = res.data.content
      this.listLoading = false
    })
  },

  //查询所有省方法
  findAllProvince(){
    hosp_api.getByDictCode("Province").then(res => {
      this.provinceList = res.data
    })
  },

  //搜索表单重置方法
  resetData(){
    this.searchObj = {}
    this.fetchData()
    this.cityList = []
    this.districtList = []
          
  },

  //改变所选省
  provinceChanged(){
          this.cityList = []
          this.searchObj.cityCode = null
          this.districtList = []
          this.searchObj.districtCode = null
    hosp_api.findChildData(this.searchObj.provinceCode).then(res => {
          this.cityList = res.data
    })
  },

  //改变所选市
  cityChanged(){
        this.districtList = []
        this.searchObj.districtCode = null
    hosp_api.findChildData(this.searchObj.cityCode).then(res => {
          this.districtList = res.data
    })
  },

  //改变医院状态
  updateStatus(row){
        let id = row.id
        let status = row.status === 1 ? 0 : 1
        hosp_api.updateStatus(id,status).then(res => {
            this.$message.success("状态改变成功!")
            //刷新页面
            this.fetchData()
        })
    },

  //改变所选区域
  districtChanged(){
    this.$forceUpdate()
  },

  //改变每页记录数
  handleSizeChange(val) {
       this.limit = val
       this.fetchData()
  },

  //改变当前页码
  handleCurrentChange(val) {
       this.page = val
       this.fetchData()
  },

  //跳转到详情页面
  jumpShow(id){
    this.$router.push({
      path:"/hospSet/hosp/show/:id",
      query:{ id: id }
    })
  },

  //跳转排班页面
  jumpSchedule(hoscode){
    this.$router.push({
      path:"/hospSet/hosp/schedule/:id",
      query:{ id: hoscode }
    })
  }

}
}
</script>

<style>

</style>